<template>
<div class="layout">
        <Layout>
            <Header>
               <Menu v-if="routeData.index!=99" mode="horizontal" theme="dark" :active-name="routeData.index" on-select="changeRouter('123')">
                   <div><Submenu theme="dark"  name="1">
                        <template slot="title">
                            <Icon type="ios-navigate" />
                            个人签到
                        </template>
                            <MenuItem name="1-1" ><div @click="changeRouter('information')">签到列表</div></MenuItem>
                    </Submenu>
                     <Submenu theme="dark"  name="2" v-if="user.isAdmin">
                       <template slot="title">
                         <Icon type="ios-navigate" />
                         班级管理
                       </template>
                       <MenuItem name="2-1" ><div  @click="changeRouter('employeeList')">班级列表</div></MenuItem>
                       <MenuItem name="2-1" ><div @click="changeRouter('employeeAdd')" >创建班级</div></MenuItem>
                     </Submenu>
                         <Submenu name="3" v-if="user.isAdmin">
                        <template slot="title">
                            <Icon type="ios-keypad" />
                            签到管理
                        </template>
                            <MenuItem name="3-1"><div @click="changeRouter('departmentList')">签到列表</div></MenuItem>
                            <MenuItem name="3-2" ><div @click="changeRouter('departmentAdd')" >添加签到</div></MenuItem>
                    </Submenu>

                    </div>

                    <div style="color:#fff">
                       <span style="cursor: pointer" @click="changeRouter('personal')" > <Avatar icon="ios-person"  />个人信息</span>
                      <span style="cursor: pointer;margin-left:20px" @click="logout"><Icon type="md-power" />退出登录</span>
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '20px 0'}" v-if="routeData.index!=99">
                    <BreadcrumbItem><span @click="changeRouter('home')" style="cursor: pointer;">{{routeData.title[0]}}</span> </BreadcrumbItem>
                    <BreadcrumbItem v-show="routeData.title[1]"><span>{{routeData.title[1]}}</span></BreadcrumbItem>
                    <BreadcrumbItem v-show="routeData.title[2]"><span>{{routeData.title[2]}}</span></BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <div style="height:100%">
                         <router-view/>
                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-center">学生签到管理系统</Footer>
        </Layout>
    </div>

</template>

<script>
import api from './api/index.js'
import {mapState} from 'vuex';
export default {
  name: "App",
  data() {
    return {
      routeData:this.$route.meta, //面包屑中的导航内容
    }
  },
  computed:{
    ...mapState([
      'user',
    ])
  },
  methods: {
    //跳转路由
    changeRouter(route) {
      this.$router.push({ name: route });
    },

    logout(){
           this.$Modal.confirm({
                    title: '退出登录',
                    content: '<p>确定要退出登录吗</p>',
                    okText: '确定',
                    cancelText: '取消',
                    onOk:()=>{
                         this.$store.commit('del_user',{});
                         this.$router.push({ name: 'login' });
                    }
                });
    }
  },
  mounted() {

  },
  watch:{
        //监听路由变化时，改变面包屑中的导航内容
        $route(to,from){
            this.routeData=this.$route.meta
        }
  }
};

</script>

<style scoped >
.ivu-menu{
display: flex;
justify-content: space-between;
}
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
        height: 100%;
}
.ivu-layout{
  height: 100%
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
.ivu-layout-content{
  display: flex;
  flex-direction: column;
}
.ivu-card-bordered{
  flex: auto;
  overflow: auto;
}
</style>
